<template>
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'bottom',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      <slot></slot>
    </div>
    <slot slot="reference" name="popper"></slot>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/vue-popper.css';

  export default {
    name:'AtomPopper',
    components: {
      'popper': Popper
    },
    props:{
        placement:{
            default:()=>{
                return 'bottom';
            }
        }
    }
  }
//   Placement =[
//     'auto'
//   , 'auto-start'
//   , 'auto-end'
//   , 'top'
//   , 'top-start'
//   , 'top-end'
//   , 'bottom'
//   , 'bottom-start'
//   , 'bottom-end'
//   , 'right'
//   , 'right-start'
//   , 'right-end'
//   , 'left'
//   , 'left-start'
//   , 'left-end']
</script>